<template>
  <div class="recipe">
    <!-- 菜谱分类 选项卡 -->
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="tabClickHandel"
    >
      <el-tab-pane
        v-for="item in classifies"
        :key="item.parent_type"
        :label="item.parent_name"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <!-- 在本页面跳转 -->
          <router-link
            v-for="option in item.list"
            :key="option.type"
            :to="{ query: { ...$route.query, classify: option.type, page: 1 } }"
            :class="{ active: classifyType === option.type }"
            >{{ option.name }}
          </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 标题 -->
    <h2>家常好味道，给你家一般的温暖</h2>

    <el-container direction="horizontal">
      <el-aside width="200px" class="recipe-aside">
        <h4>筛选</h4>
        <!-- 筛选侧边导航 折叠面板-->
        <el-collapse v-model="propertiesActivName">
          <el-collapse-item
            v-for="item in properties"
            :key="item.parent_type"
            :title="item.parent_name"
            :name="item.parent_type"
          >
            <div class="filter-tags">
              <el-tag
                type="info"
                v-for="option in item.list"
                :key="option.type"
                :class="{
                  'selected-tag': option.type === propertiesType[item.title],
                }"
                @click="selectedTag(option)"
              >
                {{ option.name }}
              </el-tag>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-aside>

      <el-container direction="vertical" class="list-box">
        <el-main>
          <!-- 判断数据是否存在，有数据展示，否则显示暂时没有 -->
          <template v-if="list.length > 0">
            <!-- 筛选后的菜谱 -->
            <MenuCard :info="list"></MenuCard>
          </template>
          <template v-else class="menu-empty">
            暂时没有过滤出菜谱信息，请选择其他的筛选条件</template
          >
        </el-main>

        <el-footer height="">
          <!-- 分页 -->
          <el-pagination
            @current-change="changePage"
            :current-page="pages.currentPage"
            :page-size="pages.pageSize"
            layout="total, prev, pager, next"
            :total="pages.total"
            background
          >
          </el-pagination>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MenuCard from "@/components/MenuCard";
import { getClassify, getProperty, getMenus } from "@/apis/menu.js";
export default {
  name: "Recipe",
  components: { MenuCard },
  data() {
    return {
      // 定义选中的选项卡的name值，分类
      activeName: "1",
      // 菜谱分类
      classifies: [],
      // 菜谱分类下的详细类别 1-1 3-1
      classifyType: "1-1",
      //属性分类
      properties: [],
      // 存储的的打开面板的name值 "1","2"
      propertiesActivName: [],
      //记录属性的分类（筛选条件），有多个 {craft:'1-2',flavor:'2-1'..}
      propertiesType: {},
      // 菜谱数据
      list: [],
      // 分页相关的信息
      pages: {
        // 每页显示多少条
        pageSize: 0,
        // 总条数
        total: 0,
        // 当前页码
        currentPage: 0,
        // 总页数
        totalPages: 0,
      },
    };
  },
  // 生命周期函数 挂载完成/创建完成
  mounted() {
    // 获取菜谱分类
    getClassify().then((res) => {
      // console.log(res);
      // 获取到数据
      this.classifies = res.data;
      // 判断路由中的参数（classify），如果没有参数，初始化数据
      if (!this.$route.query.classify) {
        // 初始化选中的选项卡
        this.activeName = res.data[0].parent_type;
        // 初始化被选中的类型
        this.classifyType = res.data[0].list[0].type;
        // 给当前路由添加参数，可以省略path
        this.$router.push({
          // /recipe?classify=1-1&page=1
          query: {
            classify: this.classifyType,
            page: 1,
          },
        });
      }
    });

    // 获取属性分类 工艺，口味，难度，人数等
    getProperty().then((res) => {
      console.log(res);
      this.properties = res.data;

      // craft=1-1&flavor=2-2&hard=3-1&people=4-1
      const { query } = this.$route;

      for (let i = 0; i < this.properties.length; i++) {
        // craft属性，在properties中每一个元素的title值，就是这些属性
        const key = this.properties[i].title;
        if (query[key]) {
          // 判断query中craft等属性是否有值，有值就去赋值
          this.propertiesType[key] = query[key];
          // 面板的激活状态
          this.propertiesActivName.push(this.properties[i].parent_type);
        }
      }
    });
  },
  watch: {
    // 监听路由变化
    $route: {
      handler() {
        // 判断分类参数是否存在
        const { classify } = this.$route.query; //1-1..
        if (classify) {
          // 获取大的分类
          // this.activeName = classify.substr(0, 1);//字符串截取
          this.activeName = classify[0]; //获取字符串中指定位置的一个字符串
          // 获取小的分类
          this.classifyType = classify;
          // console.log(this.activeName, this.classifyType);
          // 向后台获取数据，获取菜单数据，调用的接口为 获取菜谱getMenus
          this.getMenus();
        }
      },
      //是否立即执行
      immediate: true,
    },
  },
  methods: {
    // 传参的格式
    /**
     * {
     *  page:1,
     *  classify:"1-1",
     *  property:{
     *    crafe:"1-2",
     *    hard:"3-1",
     *    people:"4-1",
     *    flavor:"2-1",
     *  }
     * }
     */
    getMenus() {
      //获取参数，克隆出来
      const query = { ...this.$route.query };
      // 向后台发送的参数
      const params = {
        // 判断query中page值，没有值赋值为1，否侧是当前值
        page: query.page || 1,
        // 获取到分类
        classify: query.classify,
      };
      //筛选
      // 删除 查询条件中的page和classify
      delete query.page;
      delete query.classify;
      // 再去判断query对象中是否还有别的属性，如果有再去赋值给property
      // 判断对象中属性长度 使用对象方法 Object.keys  获取对象中属性名 返回值是数组，会将所有的属性放到数组中，没有属性数组长度为0
      if (Object.keys(query).length > 0) {
        params.property = {
          ...query,
        };
      }
      // 加载前先清空加载状态
      let loading = null;
      // 获取数据之前，显示数据加载中,vue提供的方法
      this.$nextTick(() => {
        // elementui-ui提供的$loading
        loading = this.$loading({
          // 在指定元素上添加加载效果
          target: ".list-box",
          // 加载时视窗可以滚动
          lock: true,
          // 提示文字
          text: "Loading",
          // 图标
          spinner: "el-icon-loading",
          // 背景色
          background: "rgba(0, 0, 0, 0.7)",
        });
      });

      // 发送请求
      getMenus(params).then((res) => {
        console.log(res);
        // 获取数据
        this.list = res.data.list;
        // 存储分页信息
        this.pages.pageSize = res.data.page_size;
        this.pages.total = res.data.total;
        this.pages.currentPage = res.data.current_page;
        this.pages.totalPages = Math.ceil(res.data.total / res.data.page_size);

        // 获取到数据后，关闭加载效果
        if (loading) {
          // element-ui提供的关闭加载组件
          loading.close();
        }
      });
    },
    // 分页
    changePage(val) {
      // console.log(val);
      // 如果上面使用了修饰符.sync 赋值可以省略,已经同步加载
      this.pages.currentPage = val;
      this.$router.push({
        query: {
          ...this.$route.query,
          page: this.pages.currentPage,
        },
      });
    },
    // 切换分类
    // 选项卡切换后，应该直接选中当前标签页中的第一项
    tabClickHandel(tab, event) {
      // 点击切换时，或更改activeName的值，activeName存储的是大的分类信息
      // console.log(this.activeName);
      // 1.获取当前分类 获取parent_type
      const activeName = this.activeName;
      // 获取所有当前类别下的所有数据 {parent_type,list}
      const item = this.classifies.find((option) => {
        return option.parent_type === activeName;
      });
      if (item) {
        // 2.找到当前类下面的第一个子项的type值
        this.classifyType = item.list[0].type;
        // 3.传递参数classify,实现路由跳转
        this.$router.push({
          query: {
            // 先解构当前所有参数
            ...this.$route.query,
            classify: this.classifyType,
            page: 1,
          },
        });
      }
    },
    // 点击筛选
    selectedTag(option) {
      console.log(option);
      // 获取标题 将来的属性名 title是propertiesType的属性名
      const title = option.title;
      // query中的属性值
      const type = option.type;
      // 1.获取参数
      let query = { ...this.$route.query };

      // 点击时要做判断，判断是否已经存在这个筛选，如果存在应该去掉当前属性
      // 同步删掉查询参数中的属性
      if (this.propertiesType[title] === type) {
        (this.propertiesType[title] = ""),
          // 删掉对应的查询参数
          delete query[title];
      } else {
        // 点击后要将title和type值存放到this.propertyType对象中
        // 将来做样式筛选
        // propertiesType={craft:1-1,flavor:2-4}
        this.propertiesType[title] = type;
        // 只考虑参数变化
        query[title] = type;
      }

      // 跳转
      this.$router.push({
        query,
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.recipe {
  .recipe-link {
    a {
      display: inline-block;
      font-size: 12px;
      padding: 3px 10px;
      line-height: 28px;
    }

    .active {
      background-color: #f00;
      color: #fff;
    }
  }

  h2 {
    text-align: center;
    // line-height: 150px;
    line-height: 80px;
    font-weight: normal;
  }

  .el-aside {
    background-color: #fff;
    padding: 20px 20px;
    cursor: pointer;

    // height: 100%;
    h4 {
      margin-bottom: 15px;
    }

    // 筛选按钮
    .filter-tags {
      display: flex;
      // 超出换行
      flex-wrap: wrap;
      // 两端对齐
      justify-content: space-around;

      span {
        min-width: 56px;
        margin-bottom: 10px;
        text-align: center;

        // .span.selected-tag 类名是selected-tag的span标签
        &.selected-tag {
          background-color: #f00;
          color: #fff;
        }
      }
    }
  }

  .menu-empty {
    width: 100%;
    text-align: center;
    font-size: 20px;
  }

  .el-footer {
    text-align: right;
  }
}
</style>